<template>
    <div class="flex-box">
        <heads title="二维码扫码" ></heads>
        <div style="display: flex;" class="flex-item">
            <div id="bcid" style="background: #2c3e50;flex: 1;">
            </div>
        </div>
    </div>
</template>

<script>
    import heads from '../header'

    export default {
        name: "barcode",
        components: {
            heads
        },
        data() {
            return {
                scan: '',
                ele: ''
            }
        },
        methods: {
            handle(e) {
                function addHandler(el, type, handler) {
                    el.addEventListener(type, handler, false)
                }

                addHandler(e.target, 'plusready', (e) => {
                    e.onPlusReady()
                })
            },
            onPlusReady() {

                this.ele = document.getElementById("scan");
                this.ele.removeAttribute("disabled");
            },
            bindBarcode(barcode){

                this.$router.push({
                    name:'accredit',
                    params:{
                        barcode:barcode
                    }
                });

            },
            onmarked(type, result) {
                var text = '未知: ';
                switch (type) {
                    case plus.barcode.QR:
                        text = 'QR: ';
                        break;
                    case plus.barcode.EAN13:
                        text = 'EAN13: ';
                        break;
                    case plus.barcode.EAN8:
                        text = 'EAN8: ';
                        break;
                }

                // console.log("扫码成功：text:" + text + "result:" + result)
                // alert(text + result);
                this.bindBarcode(result);

            },
            startRecognize() {
                this.scan = new plus.barcode.Barcode('bcid');
                console.log(this.scan);
                this.scan.onmarked = this.onmarked;
            },
            startScan() {
                this.scan.start();//开始扫码
            },
            cancelScan() {
                this.scan.cancel();//停止扫码
            },
            setFlash() {
                this.scan.setFlash(true);//开启闪光灯
            },
            closeCode(){
                this.scan.close();//关闭扫码
            },
        },
        mounted(){
            if(window.plus) {
                this.startRecognize()
            } else {
                document.addEventListener("plusready", function () {
                    this.startRecognize()
                }, false);
            }
        },
        activated(){
            if(window.plus) {
                this.startRecognize();
            } else {
                document.addEventListener("plusready", function () {
                    this.startRecognize();
                }, false);
            }
        }
        ,deactivated(){
            if(window.plus) {
                this.closeCode();
            } else {
                document.addEventListener("plusready", function () {
                    this.closeCode();
                }, false);
            }
        },
        destroyed(){
            if(window.plus) {
                this.closeCode();
            } else {
                document.addEventListener("plusready", function () {
                    this.closeCode();
                }, false);
            }
        }


    }
</script>
<style lang="less" scoped>
    @import "../../assets/css/comm.less";
</style>